<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>使用coding、daocloud和docker打造markdown纯静态博客 - sink_cup - 博客园</title>
<link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=TdLMZRHMQfitXmNZ7SFinI4hbzrT2-_1PvIqhhWnsbI1"/>
<link type="text/css" rel="stylesheet" href="/blog/customcss/63933.css?v=%2fpiNkqeMWUcO7T7sJZqFCREpJro%3d"/>
<link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/sink_cup/rss"/>
<link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/sink_cup/rsd.xml"/>
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/sink_cup/wlwmanifest.xml"/>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">var currentBlogApp = 'sink_cup', cb_enable_mathjax=false;</script>
<script src="/bundles/blog-common.js?v=PlJ9KQtkGa_ccgZxU9Fon-EDNUyrm0y3GKrHRkjy4p81" type="text/javascript"></script>
</head>
<body>
<a name="top"></a>
<!--PageBeginHtml Block Begin-->
<!--[if lte IE 7]> <div style="height: 59px; padding:0 0 0 15px;"> <a href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie?ocid=ie6_countdown_bannercode"><img src="http://theie6countdown.cn/img/banner/warning_bar_0027_Simplified%20Chinese.jpg" border="0" height="42" width="820" alt="IE6、IE7无法正常访问本站，请升级至IE9或者IE8。" /></a></div> <![endif]-->
<!--PageBeginHtml Block End-->

<!--done-->
<div id="home">
<div id="header">
	<div id="blogTitle">
	<a id="lnkBlogLogo" href="http://www.cnblogs.com/sink_cup/"><img id="blogLogo" src="/Skins/custom/images/logo.gif" alt="返回主页" /></a>			
		
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/sink_cup/">sink_cup</a></h1>
<h2>细节 控制 CCN</h2>



		
	</div><!--end: blogTitle 博客的标题和副标题 -->
	<div id="navigator">
		
<ul id="navList">
<li></li>
<li><a id="MyLinks1_MyHomeLink" class="menu" href="http://www.cnblogs.com/sink_cup/">首页</a></li>
<li></li>
<li><a id="MyLinks1_ContactLink" class="menu" rel="nofollow" href="http://msg.cnblogs.com/send/sink_cup">联系</a></li>
<li><a id="MyLinks1_Syndication" class="menu" href="http://www.cnblogs.com/sink_cup/rss">订阅</a>
<!--<a id="MyLinks1_XMLLink" class="aHeaderXML" href="http://www.cnblogs.com/sink_cup/rss"><img src="http://www.cnblogs.com/images/xml.gif" alt="订阅" /></a>--></li>
<li><a id="MyLinks1_Admin" class="menu" rel="nofollow" href="http://i.cnblogs.com/">管理</a></li>
</ul>
		<div class="blogStats">
			
			
			
		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->

<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		
<div id="post_detail">
<!--done-->
<div id="topics">
	<div class = "post">
		<h1 class = "postTitle">
			<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/sink_cup/p/using-coding-daocloud-and-docker-to-build-a-markdown-blog.html">使用coding、daocloud和docker打造markdown纯静态博客</a>
		</h1>
		<div class="clear"></div>
		<div class="postBody">
			<div id="cnblogs_post_body"><p>说起独立博客的技术演变，从数据库到纯文本放git是一大进步，从HTML到markdown又是一大进步。</p>
<p>解析技术有没有进步呢？既然markdown是纯文本了，再用PHP/Python/Ruby去实时解析，多么多此一举啊（比如github用的Jekyll），还需要配置服务器环境。如果用shell把markdown转换成HTML，生成纯静态博客多么愉快，无需服务器，直接放到云存储CDN上，飞快！</p>
<p>先看疗效！openwrt.io就是这么一个纯静态网站，网址：<a href="http://openwrt.io/" target="_blank">http://openwrt.io/</a>，代码在coding上：<a href="https://coding.net/u/openwrtio/p/portal/git" target="_blank">https://coding.net/u/openwrtio/p/portal/git</a>。</p>
<p><img src="http://com-163-sinkcup.qiniudn.com/openwrtio.png" alt="openwrt.io" /></p>
<p>打造这么一个酷炫的博客需要几步？</p>
<p>只需要两步，比把大象放进冰箱里还要简单^_^</p>
<p>第一步：把代码提交coding</p>
<p>注册登录&nbsp;<a href="https://coding.net/register?key=291490cc-34c2-4ebe-a1c7-48ee327a6e83" target="_blank">coding.net</a>，fork或创建一个项目，比如blog，代码：<a href="https://coding.net/u/openwrtio/p/portal/git/tree/1.0.0/" target="_blank">https://coding.net/u/openwrtio/p/portal/git/tree/1.0.0/</a>，修改其中的<code>docs/index.md</code>即为博客首页，然后提交，打tag（比如0.1.0），push。指令如下：</p>
<div class="cnblogs_code">
<pre><span style="color: #000000;">git clone xxx
cd xxx
</span><span style="color: #0000ff;">wget</span> -O blog.<span style="color: #0000ff;">zip</span> https:<span style="color: #008000;">//</span><span style="color: #008000;">coding.net/u/openwrtio/p/portal/git/archive/1.0.0</span>
<span style="color: #0000ff;">unzip</span> blog.<span style="color: #0000ff;">zip</span>
<span style="color: #0000ff;">rm</span> blog.<span style="color: #0000ff;">zip</span>
<span style="color: #0000ff;">echo</span> <span style="color: #800000;">"</span><span style="color: #800000;">Hello! 树先生</span><span style="color: #800000;">"</span> &gt; docs/<span style="color: #000000;">index.md
git add .
git commit </span>-m <span style="color: #800000;">'</span><span style="color: #800000;">first commit</span><span style="color: #800000;">'</span><span style="color: #000000;">
git push origin master
git tag </span>-a <span style="color: #800080;">0.1</span>.<span style="color: #800080;">0</span> -m <span style="color: #800000;">'</span><span style="color: #800000;">first commit</span><span style="color: #800000;">'</span><span style="color: #000000;">
git push </span>--tags</pre>
</div>
<p>&nbsp;</p>
<p><span style="line-height: 1.5;">第二步：使用daocloud自动构建和部署</span></p>
<p>打开<a href="https://daocloud.io/" target="_blank">daocloud.io</a>，创建一个项目，&ldquo;设置代码源&rdquo;为刚才提交coding的项目即可，将触发自动构建。等待构建完成，即生成了一个debian系统镜像，点&ldquo;查看镜像&rdquo;&mdash;&mdash;》&ldquo;部署&rdquo;&mdash;&mdash;》&ldquo;基础设置&rdquo;&mdash;&mdash;》&ldquo;立即部署&rdquo;，即可。daocloud会赠送一个子域名，访问即可看到博客已经跑起来了。建议购买一个自己的域名，CNAME绑定即可，比如<a href="https://domains.dnspod.cn/" target="_blank">dnspod域名注册服务</a>。</p>
<p><img src="http://com-163-sinkcup.qiniudn.com/daocloud-build-flows-new.png" alt="daocloud build-flows new" /><img src="http://com-163-sinkcup.qiniudn.com/daocloud-build-flows-success-openwrtio-portal.png" alt="daocloud build-flows success openwrtio-portal" /><img src="http://com-163-sinkcup.qiniudn.com/daocloud-runtimes-app.png" alt="daocloud runtimes-app" /></p>
<p>构建的过程为什么这么漫长？</p>
<p>请看这个文件：&nbsp;<a href="https://coding.net/u/openwrtio/p/portal/git/blob/1.0.0/Dockerfile">https://coding.net/u/openwrtio/p/portal/git/blob/1.0.0/Dockerfile</a></p>
<div class="cnblogs_code">
<pre><span style="color: #000000;">FROM nginx
MAINTAINER sinkcup </span>&lt;sinkcup@<span style="color: #800080;">163</span>.com&gt;<span style="color: #000000;">

RUN apt</span>-get update -<span style="color: #000000;">qq
RUN apt</span>-get upgrade -<span style="color: #000000;">y
RUN apt</span>-get <span style="color: #0000ff;">install</span> -y python-<span style="color: #000000;">pip
RUN pip </span><span style="color: #0000ff;">install</span><span style="color: #000000;"> mkdocs
RUN </span><span style="color: #0000ff;">mkdir</span> -p /usr/share/nginx/html/<span style="color: #000000;">portal
ADD . </span>/usr/share/nginx/html/portal/<span style="color: #000000;">
RUN cd </span>/usr/share/nginx/html/portal/ &amp;&amp;<span style="color: #000000;"> \
  mkdocs build
  RUN </span><span style="color: #0000ff;">rm</span> -f /etc/nginx/conf.d<span style="color: #008000;">/*</span><span style="color: #008000;">
  ADD nginx/conf.d /etc/nginx/conf.d/</span></pre>
</div>
<p>&nbsp;</p>
<p><span style="line-height: 1.5;">可以看到每次构建都需要apt-get升级、安装环境、安装mkdocs，最后用mkdocs生成HTML。前面几个步骤每次都一样，那就想办法重用即可。</span></p>
<p>把<code>Dockerfile</code>改成两个，一个是每次都不变的服务器环境：</p>
<div class="cnblogs_code">
<pre><span style="color: #000000;">FROM nginx
MAINTAINER sinkcup </span>&lt;sinkcup@<span style="color: #800080;">163</span>.com&gt;<span style="color: #000000;">

RUN apt</span>-get update -<span style="color: #000000;">qq
RUN apt</span>-get upgrade -<span style="color: #000000;">y
RUN apt</span>-get <span style="color: #0000ff;">install</span> -y python-<span style="color: #000000;">pip
RUN pip </span><span style="color: #0000ff;">install</span><span style="color: #000000;"> mkdocs
RUN cd </span>/usr/share/nginx/html/ &amp;&amp;<span style="color: #000000;"> \
  mkdocs new demo
RUN cd </span>/usr/share/nginx/html/demo &amp;&amp;<span style="color: #000000;"> \
  mkdocs build
RUN </span><span style="color: #0000ff;">rm</span> -f /etc/nginx/conf.d<span style="color: #008000;">/*</span><span style="color: #008000;">
ADD nginx/conf.d /etc/nginx/conf.d/</span></pre>
</div>
<p>&nbsp;</p>
<p><span style="line-height: 1.5;">我把它提交到了github（</span><a style="line-height: 1.5;" href="https://github.com/sinkcup/docker-library-nginx-mkdocs" target="_blank">https://github.com/sinkcup/docker-library-nginx-mkdocs</a><span style="line-height: 1.5;">），然后注册登录docker.com，创建一个项目，选择来自github的代码（</span><a style="line-height: 1.5;" href="https://registry.hub.docker.com/u/sinkcup/nginx-mkdocs/" target="_blank">https://registry.hub.docker.com/u/sinkcup/nginx-mkdocs/</a><span style="line-height: 1.5;">），构建成功，生成的镜像是&nbsp;</span><code style="line-height: 1.5;">sinkcup/nginx-mkdocs:0.1.0</code><span style="line-height: 1.5;">。</span></p>
<p>daocloud的Dockerfile里直接使用这个docker镜像即可，从此构建飞快！代码如下：</p>
<div class="cnblogs_code">
<pre>FROM sinkcup/nginx-mkdocs:<span style="color: #800080;">0.1</span>.<span style="color: #800080;">0</span><span style="color: #000000;">
MAINTAINER sinkcup </span>&lt;sinkcup@<span style="color: #800080;">163</span>.com&gt;<span style="color: #000000;">

ADD . </span>/usr/share/nginx/html/<span style="color: #000000;">portal
RUN cd </span>/usr/share/nginx/html/portal/ &amp;&amp;<span style="color: #000000;"> \
  mkdocs build
  RUN </span><span style="color: #0000ff;">rm</span> -f /etc/nginx/conf.d<span style="color: #008000;">/*</span><span style="color: #008000;">
  ADD nginx/conf.d /etc/nginx/conf.d/</span></pre>
</div>
<p>&nbsp;</p>
<p><span style="line-height: 1.5;">完整代码在&nbsp;</span><a style="line-height: 1.5;" href="https://coding.net/u/openwrtio/p/portal/git/tree/1.1.0/" target="_blank">https://coding.net/u/openwrtio/p/portal/git/tree/1.1.0/</a><span style="line-height: 1.5;">，这是一个开源项目，欢迎fork一起协作。</span></p>
<p>mkdocs文档在：<a href="http://www.mkdocs.org/" target="_blank">http://www.mkdocs.org/</a></p></div><div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory"></div>
<div id="EntryTag"></div>
<div id="blog_post_info">
</div>
<div class="clear"></div>
<div id="post_next_prev"></div>
</div>


		</div>
		<div class = "postDesc">posted @ <span id="post-date">2015-06-16 13:21</span> <a href='http://www.cnblogs.com/sink_cup/'>sink_cup</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)  <a href ="http://i.cnblogs.com/EditPosts.aspx?postid=4580513" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(4580513);return false;">收藏</a></div>
	</div>
	<script type="text/javascript">var allowComments=true,isLogined=false,cb_blogId=63933,cb_entryId=4580513,cb_blogApp=currentBlogApp,cb_blogUserGuid='2d014aa7-d1e3-de11-ba8f-001cf0cd104b',cb_entryCreatedDate='2015/6/16 13:21:00';loadViewCount(cb_entryId);</script>
	
</div><!--end: topics 文章、评论容器-->
</div><a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" id="lnk_RefreshComments" onclick="return RefreshCommentList();">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div>
<div id="comment_form_container"></div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="site_nav_under"><a href="http://www.cnblogs.com/" target="_blank" title="开发者的网上家园">博客园首页</a><a href="http://q.cnblogs.com/" target="_blank" title="程序员问答社区">博问</a><a href="http://news.cnblogs.com/" target="_blank" title="IT新闻">新闻</a><a href="http://home.cnblogs.com/ing/" target="_blank">闪存</a><a href="http://job.cnblogs.com/" target="_blank">程序员招聘</a><a href="http://kb.cnblogs.com/" target="_blank">知识库</a></div>
<div id="opt_under_post"></div>
<script type="text/javascript">
    var enableGoogleAd = canShowAdsense(); 
    fixPostBodyFormat();
</script>
<div id="google_ad_c1" class="c_ad_block"></div>
<div id="under_post_news"></div>
<div id="google_ad_c2" class="c_ad_block"></div>
<div id="under_post_kb"></div>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
$(function () {
    loadNewsAndKb();
    loadBlogSignature();
    LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
    GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate);
    loadOptUnderPost();
    GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);
    setTimeout(function () { incrementViewCount(cb_entryId); }, 200);
});
</script>
</div>

	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器-->

	<div id="sideBar">
		<div id="sideBarMain">
			
			<div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script>
			
			<div id="leftcontentcontainer">
				<div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>
			</div>
			
		</div><!--end: sideBarMain -->
	</div><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		
<!--done-->
Copyright &copy;2015 sink_cup
	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->
<!--PageEndHtml Block Begin-->
<div style="text-align:center;clear:both">
<a target="_blank" rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.zh"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a>
<p>本站原创作品采用<a target="_blank" rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.zh">知识共享署名 3.0许可协议</a>进行许可。
</p>
</div>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=16682583" charset="UTF-8"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17660684-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!--PageEndHtml Block End-->
</body>
</html>
